<template>
  <div class="news_detail">
    <div class="image">
      <el-image
        style="height:100%;width:inherit"
        :src="news_container_img"
        fit="cover"
      ></el-image>
      <div class="front_title">
        <p>品牌新闻</p>
        <p>
          三两已经在烟台开了数十家门店，为烟台人民提供了便利、干净、美味的酱香包
        </p>
      </div>
    </div>

    <div class="news_detail_content">
      <p>{{ news_detail.journalism_title }}</p>
      <div class="title">
        <span class="time_icon">
          <i class="iconfont icon-shizhong"></i>
        </span>
        <span>{{ news_detail.journalism_time | formatDate }}</span>
      </div>
      <div v-html="news_detail.journalism_content" class="content"></div>
      <img :src="news_detail.journalism_image" alt="" srcset="" class="img" />
    </div>
  </div>
</template>

<script>
import "../assets/font_download/iconfont.css";
export default {
  data() {
    return {
      news_container_img: require("../assets/news/image/banner-无字.jpg"),
      news_detail: {
        title: "吃了这么多年，你对酱和卤了解多少呢？ ",
        date: "2019-10-11",
        content: "",
        url: ""
      },
      time_icon: require("../assets/news/icon/组10.jpg"),
      detail_css_style:
        "<p><br /></p><p>12月29日，第十三届威尼都杯外交官烹饪赛在天津举办，来自多个国家的外交官们汇聚一堂，以厨会友，以食相交。欣和食品连续两年以第一协办企业的身份亮相活动现场，为在场嘉宾送上用心、地道的中国味道。</p><p><br /></p><p>随着全球一体化进程的加快和中国“一带一路”倡议的不断推进，各国间交往交流日益频繁密切，越来越多国家的不同文化交融碰撞出精彩的火花，在这之中，美食作为沟通的桥梁，打开了不同国家之间人文交流的新窗口。</p><p><br /></p><p>本届大赛，共有来自11个国家的驻华使馆外交官及家庭出席，一起比拼厨艺，交流文化。</p><p><br /></p>"
    };
  },
  created(){
    this.news_detail = this.$route.params
  }
};
</script>

<style lang="less" scoped>
.news_detail {
  .image {
    position: relative;
    width: 100%;
    height: 300px;
    background: transparent;
    margin-bottom: 65px;

    .front_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: front_title 2s;
      cursor: default;

      @keyframes front_title {
        from {
          opacity: 0;
          transform: translate(-50%, 50%);
        }
      }

      p {
        color: #ffffff;
        margin: 0;
        text-align: center;

        &:first-child {
          font-size: 48px;
          font-weight: bold;
          margin-bottom: 23px;
        }
        &:last-child {
          font-size: 16px;
          font-weight: 400;
        }
      }
    }
  }

  .news_detail_content {
    width: fit-content;
    margin: 0 auto;

    p {
      font-size: 30px;
      font-weight: 400;
      margin: 0;
    }

    .title {
      position: relative;
      display: flex;
      span {
        display: block;

        &:first-child {
          margin-top: 11px;
        }

        &:last-child {
          font-size: 16px;
          font-weight: 300;
          margin-top: 11px;
          margin-left: 11px;
        }
      }
    }

    .content {
      width: 701px;
      height: fit-content;
      background: transparent;
      //   border: 1px solid #f1f1f1;
      margin: 0;
      margin-top: 66px;
      margin-left: 247px;

      // 为v-html得富文本添加css样式 用到深度选择
      & /deep/ p {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        opacity: 0.8;
      }
    }
    img {
      width: 200px;
      margin-left: 247px;
    }
  }
}
</style>
